import React, { useState } from 'react'
import { Grid, Card, Button } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import TopNavbar from '../../components/TopNavbar'
import BottomNav from '../../components/BottomNav'
import styles from './index.module.css'

const Menu = () => {
  const navigate = useNavigate()
  const [currentTab, setCurrentTab] = useState('outpatient')

  // 热门菜单
  const popularMenu = [
    { icon: '📅', text: '门诊挂号', color: '#4CAF50' },
    { icon: '💰', text: '门诊缴费', color: '#2196F3' },
    { icon: '💬', text: '智能客服', color: '#FF9800' }
  ]

  // 门诊服务项目
  const outpatientServices = [
    { icon: '📋', text: '门诊报告' },
    { icon: '⏰', text: '候诊查询' },
    { icon: '📝', text: '自助开单' },
    { icon: '🔬', text: '医技预约' },
    { icon: '🔄', text: '我的复诊' },
    { icon: '🎫', text: '自助取号' },
    { icon: '📋', text: '门诊导诊单' },
    { icon: '🧾', text: '电子票据' }
  ]

  // 住院服务项目
  const inpatientServices = [
    { icon: '🏥', text: '入院登记' },
    { icon: '💰', text: '住院预交' },
    { icon: '📋', text: '住院报告' },
    { icon: '📄', text: '住院日清单' },
    { icon: '🆔', text: '住院陪护证' }
  ]

  // 综合服务项目
  const comprehensiveServices = [
    { icon: '📦', text: '代寄服务' },
    { icon: '🍵', text: '中药代煎' },
    { icon: '💰', text: '价目查询' },
    { icon: '📖', text: '就医指南' }
  ]

  // 获取当前标签页的服务项目
  const getCurrentServices = () => {
    switch (currentTab) {
      case 'outpatient':
        return outpatientServices
      case 'inpatient':
        return inpatientServices
      case 'comprehensive':
        return comprehensiveServices
      default:
        return outpatientServices
    }
  }

  return (
    <div className={styles.menuPage}>
      {/* 顶部导航 */}
      <TopNavbar
        title="菜单中心"
        showBack={true}
        onBack={() => navigate(-1)}
        rightContent={
          <>
            <span>⋯</span>
            <span>◎</span>
          </>
        }
      />

      {/* 热门菜单 */}
      <div className={styles.section}>
        <div className={styles.sectionHeader}>
          <div className={styles.sectionTitle}>热门菜单</div>
        </div>
        <div className={styles.popularGrid}>
          {popularMenu.map((item, index) => (
            <div key={index} className={styles.popularItem}>
              <div 
                className={styles.popularIcon}
                style={{ backgroundColor: item.color }}
              >
                {item.icon}
              </div>
              <div className={styles.popularText}>{item.text}</div>
            </div>
          ))}
        </div>
      </div>

      {/* 分类标签页 */}
      <div className={styles.tabSection}>
        <div className={styles.tabs}>
          <div 
            className={`${styles.tab} ${currentTab === 'outpatient' ? styles.active : ''}`}
            onClick={() => setCurrentTab('outpatient')}
          >
            门诊
          </div>
          <div 
            className={`${styles.tab} ${currentTab === 'inpatient' ? styles.active : ''}`}
            onClick={() => setCurrentTab('inpatient')}
          >
            住院
          </div>
          <div 
            className={`${styles.tab} ${currentTab === 'comprehensive' ? styles.active : ''}`}
            onClick={() => setCurrentTab('comprehensive')}
          >
            综合
          </div>
        </div>
      </div>

      {/* 服务网格 */}
      <div className={styles.serviceSection}>
        <Grid columns={4} gap={12}>
          {getCurrentServices().map((item, index) => (
            <Grid.Item key={index}>
              <div className={styles.serviceItem}>
                <div className={styles.serviceIcon}>{item.icon}</div>
                <div className={styles.serviceText}>{item.text}</div>
              </div>
            </Grid.Item>
          ))}
        </Grid>
      </div>

      {/* 底部导航 */}
      <BottomNav />
    </div>
  )
}

export default Menu
